<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>添加菜单</title>
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="layui-row layui-col-space5">
  <div class="layui-col-md12" style="border-left: 2px solid red;padding: 15px 5px">
    <h2 style="text-align: center">添加菜单</h2>
    <hr>
    <div class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
          <input name="pid" id="pid" type="hidden">
          <input class="layui-input" id="pid-name" onfocus="sfocus()" autocomplete="off"/>
          <div style="display: none;width: 400px;height: 300px;background-color: white;position: fixed;
          z-index: 10;margin-left: 5px; box-shadow: 3px 3px 8px #c2c2c2;" id="dl-tree">
            <div id="select-tree"></div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">菜单名字</label>
        <div class="layui-input-block">
          <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入菜单名字" autocomplete="off"
                 class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">菜单URL</label>
        <div class="layui-input-block">
          <input type="text" id="href" name="href" lay-verify="required" placeholder="请输入菜单URL"
                 autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
          <i style="font-size: 35px;" class="layui-icon" id="iconShow"></i>
          <input type="hidden" name="icon" id="icon">
          <button style="margin-left: 40px;" type="button" class="layui-btn layui-btn-sm layui-btn-primary"
                  onclick="select()">
            选择图标
          </button>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序id</label>
        <div class="layui-input-inline">
          <input type="text" id="sortId" name="sortId" lay-verify="required|number"
                 placeholder="排序id" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">越小越靠前，例如1、2、3 ... 100、233</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">菜单状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="1" title="有效">
          <input type="radio" name="status" value="0" title="无效">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">菜单描述</label>
        <div class="layui-input-block">
          <textarea name="description" id="description" placeholder="请输入菜单描述" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="add">保存提交</button>
        </div>
      </div>
    </div>

  </div>
</div>

</body>
<script>
  var form
  layui.use(['tree', 'form', 'layer', 'jquery'], function () {
    var tree = layui.tree;
    form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;

    //初始化
    $(function () {
      $.ajax({
        url: '/admin/menu/all',
        success: function (data) {
          //加一级根目录
          let listdata = data.data
          listdata.push({'id': 0, 'pid': -1, 'name': '根目录(选择添加一级菜单)'})
          var tr = listToTree(listdata, -1)
          //渲染
          var inst1 = tree.render({
            elem: '#select-tree'  //绑定元素
            , data: tr
            , accordion: true
            , showLine: false
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
              $('#pid').val(obj.data.id)
              $('#pid-name').val(obj.data.title)
              $('#dl-tree').hide()
            }
          });
        }
      })
    })

    form.on('submit(add)', function (data) {
      $.ajax({
        data: JSON.stringify(data.field),
        contentType: "application/json; charset=utf-8",
        url: '/admin/menu/add',
        type: 'post',
        success: function (data) {
          layer.msg(data.message)
          if (data.code == 0) {
            var index = window.parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            window.setTimeout(function () {
              window.parent.layer.close(index); //再执行关闭
            }, 1200)
          }
        }
      })
      return false
    })
  });

  function sfocus() {
    $('#dl-tree').show()
  }

  function select() {
    xadmin.open('选择图标', '/admin/menu/selectIcon')
  }

  //供子页面调用
  function setIcon(icon) {
    $('#icon').val(icon)
    $('#iconShow').html(icon)
  }

  function listToTree(list, pid) {
    return list.filter(item => {
      if (item.pid === pid) {
        item.title = item.name
        item.children = listToTree(list, item.id)
        return true
      }
      return false
    })
  }
</script>
</html>
